<template>
  <div>
    <el-dialog
      title="工作经历"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="800px"
    >
      <ul>
        <li class="j_b_box">
          <div>
            <p>公司名称</p>
            <el-input
              v-model.number="form.corporateName"
              placeholder="请输入公司名称"
              clearablex
            />
          </div>
          <div>
            <p>所属部门</p>
            <el-input
              v-model.number="form.department"
              placeholder="例如：产品部"
              clearablex
            />
          </div>
        </li>
        <li class="j_b_box">
          <div>
            <p>职位名称</p>
            <el-input
              v-model.number="form.position"
              placeholder="请输入职位名称"
              clearablex
            />
          </div>
          <div>
            <p>在职时间</p>
            <el-date-picker
              v-model="data"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="选择在职时间"
              end-placeholder="选择在职时间"
              value-format="yyyy.MM.dd"
              :picker-options="pickerOptions"
            />
          </div>
        </li>
        <li>
          <div class="textarea">
            <p>工作内容</p>
            <el-input v-model="form.jobContent" type="textarea" rows="5" />
          </div>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="handleWork"
        >确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { updateWork } from '@/api/resume'
import { Indicator } from 'mint-ui'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      skillValue: null,
      options: [],
      data: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  watch: {
    form: {
      handler(val) {
        if (val.workingTime !== undefined && val.workingTime !== '') {
          this.data = val.workingTime.split('-')
          console.log(this.data)
        }
      },
      deep: true
    }
  },
  methods: {
    handleWork() {
      Indicator.open('正在编辑中，请稍后。。。')
      this.form.workingTime = this.data[0] + '-' + this.data[1]
      updateWork([this.form]).then((res) => {
        Indicator.close()
        if (res.code === 200) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
        this.$emit('handlQuery')
        this.handleClose()
      }).catch(() => {
        Indicator.close()
      })
    },
    handleClose() {
      this.data = []
      this.$emit('handleClose')
    }
  }
}
</script>
<style lang="less" scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    & > div {
        width: 50%;
      padding: 10px 20px;
      p {
        line-height: 30px;
      }
    //   &:last-child {
    //       width: 100%;
    //   }
    }
    .textarea {
        width: 100%;
    }
  }
}
</style>
